<template>

    <aside class="menu">

        <h2 :class="{ active: isRoute('/user') }">
            <nuxt-link to="/user">
                <svg-icon name="user-menu-dashboard" />
                <strong>Dashboard</strong>
            </nuxt-link>
        </h2>
        <h2 :class="{ active: isRoute('/user/template') }">
            <nuxt-link to="/user/template">
                <svg-icon name="user-menu-template" />
                <strong>Product templates</strong>
            </nuxt-link>
        </h2>

        <div class="subnav length2"
             :class="{ active: ['/user/materials', '/user/embroidery'].indexOf($route.path) >= 0, open: filesOpen }">
            <h2 @click="filesOpen = !filesOpen">
                <a>
                    <svg-icon name="user-menu-files" />
                    <strong>File library</strong>
                    <i class="iconfont icon-shang"></i>
                </a>
            </h2>
            <h3 :class="{ active: isRoute('/user/materials') }">
                <nuxt-link to="/user/materials">Image</nuxt-link>
            </h3>
            <h3 :class="{ active: isRoute('/user/embroidery') }">
                <nuxt-link to="/user/embroidery">Embroidery</nuxt-link>
            </h3>

        </div>

        <div class="subnav length3" :class="{ active: /\/branding/.test($route.path), open: brandingOpen }">
            <h2 @click="brandingOpen = !brandingOpen">
                <a>
                    <svg-icon name="user-menu-brand" />
                    <strong>Branding</strong>
                    <i class="iconfont icon-shang"></i>
                </a>
            </h2>
            <h3 :class="{ active: isRoute('/branding/necklabel') }">
                <nuxt-link to="/branding/necklabel">Neck label</nuxt-link>
            </h3>
            <h3 :class="{ active: isRoute('/branding/package') }">
                <nuxt-link to="/branding/package">Packaging bag</nuxt-link>
            </h3>
            <h3 :class="{ active: isRoute('/branding/hangtag') }">
                <nuxt-link to="/branding/hangtag">Hang tag</nuxt-link>
            </h3>
        </div>

        <h2 :class="{ active: isRoute('/user/order') }">
            <nuxt-link to="/user/order">
                <svg-icon name="user-menu-orders" />
                <strong>Orders</strong>
            </nuxt-link>
        </h2>
        <h2 :class="{ active: isRoute('/user/store') }">
            <nuxt-link to="/user/store">
                <svg-icon name="user-menu-stores" />
                <strong>Stores</strong>
            </nuxt-link>
        </h2>

        <div class="subnav "
             :class="{ active: /\/billing/.test($route.path), open: billingOpen, length3: show_wallet == 2, length2: show_wallet != 2 }">
            <h2 @click="billingOpen = !billingOpen">
                <a>
                    <svg-icon name="user-menu-billing" />
                    <strong>Billing</strong>
                    <i class="iconfont icon-shang"></i>
                </a>
            </h2>
            <h3 :class="{ active: isRoute('/billing/wallet') }" v-if="show_wallet == 2">
                <nuxt-link to="/billing/wallet">POD wallet</nuxt-link>
            </h3>
            <h3 :class="{ active: isRoute('/billing/discount') }">
                <nuxt-link to="/billing/discount">Discount</nuxt-link>
            </h3>
            <h3 :class="{ active: isRoute('/billing/transaction') }">
                <nuxt-link to="/billing/transaction">Transaction record</nuxt-link>
            </h3>
        </div>

        <div class="subnav length3" :class="{ active: /\/settings/.test($route.path), open: settingsOpen }">
            <h2 @click="settingsOpen = !settingsOpen">
                <a>
                    <svg-icon name="user-menu-setting" />
                    <strong>Settings</strong>
                    <i class="iconfont icon-shang"></i>
                </a>
            </h2>
            <h3 :class="{ active: isRoute('/settings/account') }">
                <nuxt-link to="/settings/account">My account</nuxt-link>
            </h3>
            <h3 :class="{ active: isRoute('/settings/address') }">
                <nuxt-link to="/settings/address">Address book</nuxt-link>
            </h3>
            <h3 :class="{ active: isRoute('/settings/store') }">
                <nuxt-link to="/settings/store">Store settings</nuxt-link>
            </h3>
        </div>

        <div style="flex:1;min-height: 32px;"></div>

        <button class="products-btn" @click="openProductDialog()">
            <svg-icon name="user-menu-products" />
            <span>All products</span>
        </button>
        <button class="shipping-btn" @click="openShippingDialog()">
            <svg-icon name="user-menu-shipping" />
            <span>Shipping rates</span>
        </button>

    </aside>

</template>
<script>
import { mapGetters, mapState } from "vuex";
export default {
    name: "UserMenu",
    data () {
        return {
            // billingActive:false,
            // settingsActive:false,
            filesOpen: false,
            brandingOpen: false,
            billingOpen: false,
            settingsOpen: false,
            shippingDialog: false,
        };
    },
    computed: {
        ...mapGetters({
            isLogin: "getIsLogin",
        }),
        ...mapState('user', {
            show_wallet: 'show_wallet',
        })
    },
    methods: {
        isRoute (name) {
            let path = this.$route.path;
            if (name == "/user") {
                return path == name;
            }
            return path.indexOf(name) != -1;
        },
        openShippingDialog () {
            this.$emit("global:shippingDialogOpen");
        },
        openProductDialog () {
            this.$emit("global:productDialogOpen");
        },
    },
    created () {
        let path = this.$route.path;
        this.billingOpen = ['/user/materials', '/user/embroidery'].indexOf(path) >= 0;
        this.billingOpen = /\/billing/.test(path);
        this.settingsOpen = /\/settings/.test(path);
        this.brandingOpen = /\/branding/.test(path);

    },

};
</script>
<style lang="scss" scoped>
.menu {
    font-weight: normal;
    line-height: 32px;
    white-space: nowrap;
    user-select: none;
    display: flex;
    flex-direction: column;
    padding: 0 10px 26px;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    font-family: Roboto-Regular, Roboto;
    font-weight: 400;

    a {
        display: flex;
        align-items: center;
        color: inherit;
        padding: 0 10px;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s;
        color: #212121;

        strong {
            font-weight: normal;
        }

        svg {
            color: #525252;
            width: 16px;
            height: 16px;
            margin-right: 10px;
        }

        &:hover {
            background-color: #fcfcfc;
            color: #000;
        }
    }

    h2 {
        font-size: 14px;
        font-weight: 400;
        color: #212121;
        margin-bottom: 8px;
    }

    h3 {
        color: #555;
        font-size: inherit;
        font-size: 14px;
        font-weight: normal;

        a {
            padding-left: 36px;
        }
    }

    h2.active,
    h3.active {
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #000;

        a {
            background-color: #fff;
            color: #000;
        }
    }

    button {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        height: 32px;
        min-height: 32px;
        font-size: 14px;
        padding: 0 10px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #212121;
        border: none;
        border-radius: 8px;
        margin-top: 2px;

        svg {
            width: 16px;
            height: 16px;
            margin-right: 10px;
            stroke: #707070;
            transition: all 0.2s;
        }

        &:hover {
            color: #000;
            background: #e0e0e0;
        }
    }
}

.subnav {
    position: relative;
    overflow: hidden;
    height: 32px;
    margin-bottom: 8px;
    min-height: 32px;
    transition: all 0.2s;

    h2 {
        position: relative;
        z-index: 1;

        i {
            position: absolute;
            cursor: pointer;
            right: 12px;
            top: 50%;
            width: 12px;
            height: 12px;
            margin-top: -6px;
            line-height: 12px;
            text-align: center;
            font-size: 12px;
            color: #757575;
            transform: rotate(180deg);
            transition: all 0.2s;
            z-index: 2;
            pointer-events: none;
        }
    }

    h3 {
        color: #555555;
        position: relative;
        top: -144px;
        opacity: 0;
        transition: all 0.2s;

        &+h3 {
            margin-top: 4px;
        }

        &.active {
            font-family: Roboto, Roboto;
        }
    }

    &.open {
        &.length2 {
            height: 108px;
            min-height: 108px;
        }

        &.length3 {
            height: 144px;
            min-height: 144px;
        }

        h2 i {
            transform: rotate(0deg);
        }

        h3 {
            top: 0;
            opacity: 1;
        }
    }

    &.active {
        h2 strong {
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            color: #000;
        }

        // & > h2 {
        //     strong {
        //         font-weight: bold;
        //     }
        //     color: #ea4c89;
        //     svg {
        //         fill: #ea4c89;
        //     }

        //     i {
        //         color: #ea4c89;
        //     }
        // }
    }
}
</style>
